<template>
  <AxiomLayout :columns="[{id: 'list', width: '300px'}, {id: 'editor', width: '1fr'}]" class="h-100">
    <template #col-list>
      <AxiomGroup v-if="documents && documents.length > 0" direction="vertical" gap="small">
          <AxiomButton
              v-for="doc in documents"
              :key="doc.document_id"
              text
              block
              justify="start"
              :type="selectedDocument && selectedDocument.document_id === doc.document_id ? 'primary' : 'default'"
              @click="$emit('update:selectedDocument', doc)"
              :title="doc.original_file_name || `文档 ${doc.document_id}`"
          >
              <AxiomText truncate>
                {{ doc.original_file_name || `文档 ${doc.document_id}` }}
              </AxiomText>
          </AxiomButton>
      </AxiomGroup>
      <AxiomEmpty v-else description="没有需要解析的文档。" />
    </template>
    <template #col-editor>
      <AxiomInput
        v-if="selectedDocument"
        type="textarea"
        class="h-100"
        :model-value="editableContent"
        @update:model-value="$emit('update:editableContent', $event)"
      />
      <AxiomEmpty v-else description="请从左侧选择一个文档进行预览和编辑。" />
    </template>
  </AxiomLayout>
</template>

<script setup>
import { 
    AxiomLayout, AxiomEmpty, AxiomText, AxiomInput, AxiomGroup, AxiomButton
} from 'axiom-view';

const props = defineProps({
  documents: { type: Array, required: true },
  selectedDocument: { type: Object, default: null },
  editableContent: { type: String, required: true }
});

defineEmits(['update:selectedDocument', 'update:editableContent']);

</script> 